// src/views/editor/ MarkDown.tsx
import { useState } from 'react';
import ReactMarkdown from 'react-markdown' // 阅读器
import MdEditor from 'react-markdown-editor-lite'; // 编辑器
// import style manually
import 'react-markdown-editor-lite/lib/index.css'; // 样式
type MarkDownProps = {}

export const MarkDown = (props: MarkDownProps) => {
    const [content, setContent] = useState('')
    return (
        <>
            <h1>MarkDown编辑器</h1>
            <MdEditor style={{ height: '500px' }} renderHTML={text => {
                return <ReactMarkdown>{text}</ReactMarkdown>
            }} onChange={({ html, text }: { html: any; text: any }) => {
                console.log('html', typeof html);
                console.log('text', text);
                setContent(html)
                console.log('content', content)
            }} />
            <hr />
            <div dangerouslySetInnerHTML={{ __html: content }}></div>
        </>
    )
};